<template>
  <h2>自定义指令</h2>
  <input type="text" v-focus="{ h: 30, w: 120 }" />
  <h2>全局指令</h2>
  <div v-color="'red'">全局指令指定颜色1</div>
  <div v-color="'#777'">全局指令指定颜色2</div>
  <div><button v-debounce="debounceClick">防抖</button></div>
  <el-divider></el-divider>
  <h2>计算属性</h2>
  <p>计算属性第一种----姓名：{{ fullName }}</p>
  <p>计算属性第二种----姓名：{{ fullName2 }}</p>
  <el-button type="primary" size="small" @click="changeFullName2">改变fullName2的值</el-button>
  <h2>侦听器</h2>
  <!-- 监听 ref 定义的响应式数据 -->
  <p>第一种侦听器写法绑定的值msg：<input type="text" v-model="value" /></p>
  <el-button type="primary" size="small" @click="value = '123'">改变msg得值</el-button>
  <!-- 监听 reactive 定义的响应式数据 -->
  <div>{{ obj.name }}</div>
  <div>{{ obj.age }}</div>
  <div>{{ count }}</div>
  <el-button type="primary" size="small" @click="changeName">改变obj得值</el-button>
  <el-divider></el-divider>
  <!-- watchEffect 也是一个帧听器，是一个副作用函数它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听 -->
  <div>
    <p>watchEffect 也是一个帧听器，是一个副作用函数它会监听引用数据类型的所有属性，不需要具体到某个属性，一旦运行就会立即监听</p>
    <input type="text" v-model="effectValue" />
    <button @click="stopWatchEffect">停止监听</button>
  </div>

</template>

<script setup>
import { computed, reactive, ref, watch, watchEffect } from 'vue'
// setup里面写指令
const vFocus = {
  mounted (el, binding) {
    // binding 指令的信息对象
    // 其中有一个 value 就是指令的值
    el.style.width = binding.value.w + 'px'
    el.style.height = binding.value.h + 'px'
    el.focus()
  }
}
const debounceClick = () => {
  console.log('只触发一次')
}
//计算属性
const nameData = reactive({
  firstName: '李',
  lastName: '四',
  firstName2: '张',
  lastName2: '三'
})
const fullName = computed(() => {
  return nameData.firstName + nameData.lastName
})
const fullName2 = computed({
  get () {
    return nameData.firstName2 + ' ' + nameData.lastName2
  },
  set (newValue) {
    console.log('newValue: ', newValue);
    // 注意：我们这里使用的是解构赋值语法
    [nameData.firstName2, nameData.lastName2] = newValue.split(' ')
  }
})
const changeFullName2 = () => {
  fullName2.value = '王 二'
}
// watch
const value = ref('')
// 监听 ref 定义的响应式数据
watch(value, (newValue, oldValue) => {
  console.log('newValue: ', typeof newValue, newValue);
})
const obj = reactive({
  name: 'zs',
  age: 14
});
const count = ref(0);
const changeName = () => {
  obj.name = 'ls';
  count.value++
};
// 监听 reactive 定义的响应式数据
watch(obj, (newVal, oldVal) => {
  console.log('值改变了obj', newVal)
})
watch(() => obj.name, (newVal, oldVal) => {
  console.log('值改变了obj.name', newVal)
}, {
  deep: true,
  immediate: true,
})
// 监听多个响应式数据数据
watch([() => obj.name, count], (newVal, oldVal) => {
  console.log('值改变了', newVal)
})
const effectValue = ref('')
const stop = watchEffect(() => {
  console.log('effectValue:', effectValue.value)
})
const stopWatchEffect = () => {
  console.log('停止监听')
  stop();
}
</script>

<style  lang="scss" scoped>

</style>